<template>
  <el-dialog  :title="props.searchLabel" :visible="true"  @close="close" append-to-body>
    <div style="margin-bottom: 10px"><el-button @click="search" size='mini' type="primary">搜索</el-button><el-button @click="clearConditions" size="mini" type="danger">清除</el-button></div>
    <el-row v-for="(item,index) of conditions" :key="index">
      <el-col :span="3"><el-checkbox v-model="conditions[index].checked"></el-checkbox></el-col>
      <el-col :span="5">{{item.label}}</el-col>
      <el-col :span="16">
        <el-input v-if="item.type == 'text'" size='mini' v-model="conditions[index].value" @input="inputChange(index)"></el-input>
        <el-input v-if="item.type == 'search'"  size='mini' :readonly="true" v-model="conditions[index].proxy" @input="inputChange(index)">
          <el-button slot="append" icon="el-icon-search" @click="outSearch(index)"></el-button>
        </el-input>
        <el-input v-if="item.type == 'search'" type="hidden" v-model="conditions[index].value" style="display: unset"/>
        <el-checkbox v-if="item.type == 'checkbox'" v-model="conditions[index].value"></el-checkbox>
        <el-date-picker
          type="date" v-if="item.type == 'date'"
          format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          v-model="conditions[index].value" @change="inputChange(index)"
          placeholder="选择日期" ></el-date-picker>
      </el-col>
    </el-row>
    <div style="overflow-x: auto;height: fix-content;overflow-y: hidden;">
      <CommonList ref="list" :columns="props.columns" :list-url="props.searchUrl" @tableSelect="tableSelect" :conditions="conditions"></CommonList>
    </div>

    <search-list-pop-up v-for="(item,index) of outSearchs" :key="'list-pop'+index" :props="item" @outClose="outClose"></search-list-pop-up>

  </el-dialog>
</template>

<script>
  import CommonList from "./CommonList";
  export default {
      name:'searchListPopUp',
      components: {CommonList},
      props:{
          props:Object,
          isBounced: Boolean,
      },
      data(){
          return{
              show:false,
              conditions:[],
              outSearchs:[],
          }
      },
      methods:{
          close() {
              this.$emit("outClose")
          },
          setConditions() {
              for (let i=0;i<this.props.columns.length;i++) {
                  if (this.props.columns[i].search) {
                      let condition = {checked:false,prop:this.props.columns[i].prop,label:this.props.columns[i].label,value:'',type:this.props.columns[i].type,queryProp:this.props.columns[i].queryProp}
                      if (this.props.columns[i].type=='search'){
                          condition.columns = this.props.columns[i].columns
                          condition.searchUrl = this.props.columns[i].searchUrl
                          condition.searchLabel = this.props.columns[i].searchLabel
                          condition.searchProxy = this.props.columns[i].searchProxy
                          condition.searchValue = this.props.columns[i].searchValue
                      }
                      this.conditions.push(condition)
                  }
              }
          },
          clearConditions() {
              for (let i=0;i<this.conditions.length;i++) {
                  this.conditions[i].value = ''
                  this.conditions[i].checked = false
              }
          },
          search() {
            this.$refs.list.search()
          },
          inputChange(index) {
              if (this.conditions[index].value) {
                  this.conditions[index].checked = true
              } else {
                  this.conditions[index].checked = false
              }
          },
          tableSelect(row) {
            if (this.isBounced) {
              this.$confirm('确定修改该主管信息吗? 主管信息有变更。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.props.callback(row)
                this.close()
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });          
              });
            } else {
              this.props.callback(row)
              this.close()
            }
              
          },
          outSearch(index) {
              // this.$emit("outSearch",item)
              // console.log(this.conditions[index])
              this.outSearchs.push(this.conditions[index])
              this.conditions[index].callback=(item)=>{
                  this.conditions[index].proxy=item[this.conditions[index].searchProxy]
                  this.conditions[index].value=item[this.conditions[index].searchValue]
                  this.conditions[index].checked= true
              }
          },
          close() {
              this.$emit('outClose')
          },
          outClose() {
              this.outSearchs.splice(this.outSearchs.length-1,1)
          }
      },
      created() {
          this.setConditions();
      }
  }
</script>

<style lang="less" scoped>
  /deep/.el-dialog__header{
    padding: 10px;
    background: #d51900;
  }
  /deep/.el-dialog__headerbtn{
    top:10px;
    right:10px;
    i{
      color: white !important;
    }
  }
  /deep/.el-dialog__title{
    color: white;
    font-size: 14px;
    font-weight: bold;
  }

  /deep/.el-dialog__body{
    padding: 10px 20px;
  }

  .el-row{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

</style>
